<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div" @click="back()">
          <img src="../../assets/返回.png" alt="">
          <span class="side">返回</span>
        </div>
        <div class="div">
          <span>我的好友</span>
        </div>
        <div class="div" @click="addFriends()">
          <span class="side">
            添加好友</span>
          <img src="../../assets/蓝添加.png" style="width: 13px;height: 13px" alt="">
        </div>
      </header>
      <div class="friendRequst" @click="clickRequest()">
        <p>
          <span>
            <img src="../../assets/新的朋友.png" style="width: 37px;height: 37px;" alt="">
            <a style="margin-right: 15px;">新的朋友</a>
            <van-icon name="" v-if="newsLen > 0" :badge="newsLen" />
          </span>
          <img style="margin-right: 15px" src="../../assets/更多黑@2x.png" alt="">
        </p>
      </div>
    </div>
    <div class="content">
      <van-index-bar highlight-color="#333"
                     sticky>
        <div v-for="(item, index) in list" :key="index">
          <van-index-anchor :index="item.zimu"
                            v-show="item.list != undefined && item.list.length>0"/>
          <ul v-for="(peoItem, peoIndex) in item.list"
              :key="peoIndex"
              @click="clickpeoInfo(peoItem.userid)">
            <li class="li_left">
              <img v-if="peoItem && peoItem.PHOTO" :src="peoItem.PHOTO"
                   alt="">
              <img v-else src="../../assets/photo.png" alt="">
            </li>
            <li class="li_content">
              <p class="name">{{peoItem.NICK_NAME}}</p>
<!--              <p class="phone">{{peoItem.PHONE}}</p>-->
            </li>
          </ul>
        </div>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import videoHttp from '../../http/video.http'
import Badge from 'vant'
export default {
  name: 'MyFriends',
  components: {
    Badge
  },
  data () {
    return {
      userid: '',
      from_user_id: '',
      list: [],
      imgHttp: videoHttp.imgHttp,
      newsLen: 0
    }
  },
  mounted () {
    // 截取网址后的userid
    this.userid = this.$utils.getUrlKey('userid')
    this.from_user_id = this.$utils.getUrlKey('userid')
    // $('.content').css('height', $(window).height() - $('.content').offset().top - 50 + 'px')
    // 获取已添加好友
    this.getFriends()
    // 获取好友申请数据 的长度
    this.getRequesr()
  },
  methods: {
    // 获取好友申请数据 的长度
    getRequesr () {
      this.$http.findDaiTongGuoList({from_user_id: this.from_user_id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            if (res.data.data.length < 99) {
              this.newsLen = res.data.data.length
            } else {
              this.newsLen = 99
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    clickpeoInfo (id) {
      this.$router.push({path: '/detailsFriend', query: {userid: id}})
    },
    // 获取已添加好友
    getFriends () {
      this.$http.findMyFriendPaiXu({from_user_id: this.from_user_id})
        .then(res => {
          console.log(res.data.data)
          this.list = res.data.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 点击好友申请
    clickRequest () {
      this.$router.push({path: '/friendsRequest', query: {'userid': this.userid}})
    },
    // 点击跳转 添加好友页面
    addFriends () {
      this.$router.push({path: '/addFriends', query: {'userid': this.userid}})
    }
  }
}
</script>

<style scoped>
  .all{
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #FAF9FE;
  }
  .top{
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 99999;
    background: #FFFFFF;
  }
  header{
    width: 100%;
    height: 12vw;
    display: flex;
    font-size: 15px;
    font-weight: bold;
    font-family: "PingFang SC";
  }
  header .div{
    width: 33%;
    display: flex;
    align-items: center;
  }
  header .div:nth-child(2){
    justify-content: center;
  }
  header .div:nth-child(3){
    flex-direction: row-reverse;
  }
  header .div:nth-child(3) .side{
    margin-right: 15px;
  }
 header .div img{
   width: 7px;
   height: 13px;
   margin: 0 5px 0 15px;
 }
  .side{
    color: #1da3f2;
  }
 .friendRequst{
   height: 50px;
   font-size: 15px;
   font-family: PingFang SC;
   font-weight: bold;
   color: #333333;
   display: flex;
   align-items: center;
   border-top: 1px solid #E5E5E5;
   /*border-bottom: 1px solid #E5E5E5;*/
 }
 .friendRequst p{
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .friendRequst span{
   /*margin-left: 15px;*/
   margin-left: 15px;
   display: flex;
   align-items: center;
   font-weight: 500;
 }
 .friendRequst img{
    width: 7px;
    height: 13px;
   margin-right: 10px;
  }
  .content{
    /*background: #FFFFFF;*/
    overflow: auto;
    /*padding: 20px 0;*/
    box-sizing: border-box;
  }
  .content ul {
    width: 100%;
    height: 60px;
    display: flex;
    background: #fff;
  }
  .content ul li{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .li_left, .li_right{
    /*width: 22%;*/
    margin-left: 15px;
    margin-right: 10px;
  }
  .li_left img{
    width: 37px;
    height: 37px;
    border-radius: 50%;
  }
  .li_content{
    width: 55%;
    flex-direction: column;
  }
  .li_content p{
    width: 100%;
    font-family: PingFang SC;
    font-weight: 500;
    display: flex;
    align-items: center;
    /*padding-left: 5px;*/
  }
  .name{
    font-size: 17px;
    color: #333333;
  }
  .phone{
    font-size: 13px;
    color: rgba(153, 153, 153, 1);
  }
</style>
